<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue系列课程之基础入门</title>
    <style>
        .aa{
            width: 200px;
            height: 200px;
            border: 10px red solid;
        }
        .bb{
            width: 200px;
            height: 200px;
            border: 10px green dashed;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>

    <!--v-bind: 用来将html标签属性绑定vue实例,日后通过修改vue实例中属性以达到动态修改标签属性效果-->
    <div v-bind:class="cls?'aa':'bb'" @mouseover="changeClsBB" @mouseout="changeClsAA"></div>

    <button @click="changeClsAA">修改样式为AA</button>
    <button @click="changeClsBB">修改样式为BB</button>

    <br>
    <img src="1.jpg" width="150" v-bind:alt="message">



</div>
</body>
</html>
<!--引入vue.js核心文件-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",//代表vue实例作用范围
        data:{    //用来vue实例绑定数据
            msg:"hello vue",
            cls: true,
            message:"我应该显示是ATM"
        },
        methods: { //用来给vue实例定义一些列的相关方法
            changeClsAA(){
                this.cls = true;
            },
            changeClsBB(){
                this.cls = false;
            },
        }
    });
</script>